<script setup lang="ts">
import { type Ref, ref, onMounted } from "vue";
import { goIndex, goVenueItem} from "@/util/go"
import { type Query, getVneueList } from "../../api/vneue";
import {baseUrl} from "@/api/http"
import { onReachBottom, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";

interface vneue {
	id: number,
	description: string,
	history: string,
	file:ossFile[],
	url: string
}

interface ossFile {
	url: string,
	fileType: string
}

const clickVneueItemHandler = (vneue: vneue) => {
	goVenueItem(vneue)
}

const query:Ref<Query> = ref({
	pageNum: 1,
	pageSize: 10,
	description: ""
})

const vneueList:Ref<vneue[]> = ref([])



onReachBottom(() => {
	getList()
})

const getList = () => {
	getVneueList(query.value).then(res => {
		let data = res.data["data"].data.records as vneue[]
		
		data.forEach(i => {
			vneueList.value.push({
				id: i.id,
				description: i.description,
				history: i.history,
				file: i.file,
				url: i.file[0].url
			})
		})
		
		
		query.value.pageNum++
	})
}

// 分享给朋友
  onShareAppMessage(() => ({
    title: '如初国风馆',
    path: '/pages/index/index', // 替换为你的页面路径
    imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
  }))
  // 分享到朋友圈
  onShareTimeline(() => ({
  	  title: '如初国风馆',
  	  path: '/pages/index/index', // 替换为你的页面路径
  	  imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
  }))
  
  
getList()
</script>

<template>
<view class="page">
	
	<view class="header">
		<view class="left-icon" @click="goIndex">
			<uni-icons type="left" size="20" />
		</view>
		
		<view class="title">
			<text>场景展示</text>
		</view>
		
		<view></view>
	</view>
	

	
	<scroll-view scroll-y 
		class="venue-list"
		>
		<view class="empty-state" v-if="vneueList.length === 0">
		  <uni-icons type="info" size="48" color="#7fbfb0" />
		  <text class="empty-text">暂无场景</text>
		  <text class="empty-subtext">敬请期待</text>
		</view>
		<view class="venue-item" v-for="i in vneueList" @click="clickVneueItemHandler(i)" >
			
			<image class="venue_image" :src="baseUrl + i.url" />
			
			<view class="venue-info">
				<text class="venue-name">{{i.description}}</text>
				<text class="venue-description">{{i.history}}</text>
			</view>
			
		</view>
		
	</scroll-view>
	
	
</view>
</template>

<style lang="scss" scoped>
	
.empty-state {
  .empty-text {
    font-size: 16px;
    color: #333;
    margin-top: 10rpx;
  }
  .empty-subtext {
    font-size: 14px;
    color: #999;
    margin-top: 5rpx;
  }
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400rpx;
  text-align: center;
  color: #999;
  font-size: 14px;
  background-color: white;
  width: 90%;
  margin: 50px auto;
  border-radius: 15rpx;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05)
}
	
.page {

	.venue-list {
		.venue-item {
			.venue-info {
				.venue-name {
					color: #333333;
					word-break: break-word;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
				.venue-description {
					margin-top: 10rpx;
					color: #bbbbbb;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					font-size: 12px;
					overflow: hidden;
				}
				width: 95%;
				display: flex;
				flex-direction: column;
				padding: 20rpx;
			}
			.venue_image {
				width: 100%;
			}
			width: 90%;
			margin: 30rpx auto;
			background-color: white;
			border-radius: 10px;
			box-shadow: #ddd 1px 1px 10px;
			overflow: hidden;
		}
		
		height: 85vh;
		background-color: #fafafa;
	}
	
	.header {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 20rpx;
		padding-bottom: 20rpx;
	}
	padding: 100rpx 0;
}
</style>
